<script setup>
// import axios from "axios"; //使用import方式引入axios
import { fetch7DayData } from "@/api/weatherAPI";
import { initStackedAreaChart } from "@/util/echarts";
import { ref,watch } from "vue";

const maxTemps = ref([]);
const minTemps = ref([]);
const fxDates = ref([]);
const chartDom = ref(null); //vue3中引入dom元素的方式，此为第一步

//getData(); //调用网络请求函数
//封装网络请求函数
// function getData() {
//   axios
//     .get("https://devapi.qweather.com/v7/weather/7d", {
//       params: {
//         location: "101010100",
//         key: "04ac3f1fe497469a80d713b9f737020c",
//       },
//     })
//     .then((res) => {
//       console.log(res.data)
//       res.data.daily.forEach((element) => {
//         fxDates.value.push(element.fxDate);
//         maxTemps.value.push(element.tempMax);
//         minTemps.value.push(element.tempMin);
//       });
//       //调用图标函数
//       initEcharts(fxDates.value, minTemps.value, maxTemps.value);
//     });
// }
import { useCityStore } from "../stores/cityStore";
//获取store实例
const cityStore = useCityStore();

//添加侦听器:监听状态管理中location状态的变化
watch(
  //监听的数据源
  () => cityStore.location,
  //回调函数,当数据源有变化时，需要做的事情
  () => {
    getData(cityStore.location.id);
  },
  //即时回调，初始状态执行一个回调函数【请求未来24小时天气预报数据函数】
  { immediate: true }
);

//网络请求，异步获取api数据并处理
async function getData(locationID) {
  const res = await fetch7DayData(locationID);
  console.log(res);
  res.daily.forEach((element) => {
    fxDates.value.push(element.fxDate);
    maxTemps.value.push(element.tempMax);
    minTemps.value.push(element.tempMin);
  });
  initStackedAreaChart(
    chartDom.value,
    fxDates.value,
    minTemps.value,
    maxTemps.value
  );
}

// function initEcharts(xAxisData, tempMinSeries, tempMaxSeries) {
//   echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
// // var chartDom = document.getElementById('main');
//  var myChart = echarts.init(chartDom.value);
//  var option={
//     title: {
//       text: "Stacked Area Chart",
//     },
//     tooltip: {
//       trigger: "axis",
//       axisPointer: {
//         type: "cross",
//         label: {
//           backgroundColor: "#6a7985",
//         },
//       },
//     },
//     legend: {
//       data: ["tempMin", "tempMax"],
//     },
//     toolbox: {
//       feature: {
//         saveAsImage: {},
//       },
//     },
//     grid: {
//       left: "3%",
//       right: "4%",
//       bottom: "3%",
//       containLabel: true,
//     },
//     xAxis: [
//       {
//         type: "category",
//         boundaryGap: false,
//         data: xAxisData,
//       },
//     ],
//     yAxis: [
//       {
//         type: "value",
//       },
//     ],
//     series: [
//       {
//         name: "tempMin",
//         type: "line",
//         stack: "Total",
//         areaStyle: {},
//         emphasis: {
//           focus: "series",
//         },
//         data: tempMinSeries,
//       },
//       {
//         name: "tempMax",
//         type: "line",
//         stack: "Total",
//         areaStyle: {},
//         emphasis: {
//           focus: "series",
//         },
//         data: tempMaxSeries,
//       },
//     ],
//   };

//   option && myChart.setOption(option);
// }
</script>

<template>

  <div id="main" ref="chartDom">
    <div>
      <h3>未来7天天气预报</h3>
    </div>
  </div>
  
</template>

<style scoped>
#main {
  widows: 100%;
  height: 400px;
}
</style>
